/* --- 颜色主题变量 --- */

/* :root 选择器定义全局变量 */
:root {
  /* 浅色主题 (默认) */
  --color-background: #ffffff; /* 页面背景 */
  --color-surface: #ffffff; /* 卡片、表单等表面背景 */
  --color-header-bg: #f8f8f8; /* 头部背景 */
  --color-text: #2c3e50; /* 主要文字颜色 */
  --color-text-secondary: #3a5169; /* 次要文字颜色 */
  --color-text-muted: #7f8c9b; /* 更弱的文字颜色 (页脚等) */
  --color-text-nav: #333333; /* 导航链接文字 */
  --color-text-label: #555555; /* 表单标签文字 */
  --color-text-button: #000000; /* 主要按钮文字 (浅色背景) */
  --color-text-disabled: #406040;
  --color-heading: #1a2b3c; /* 标题颜色 */
  --color-primary: #42b983; /* 主题色 (Vue 绿) */
  --color-primary-hover: #36a374; /* 主题色悬停 */
  --color-primary-focus-ring: rgba(13, 179, 102, 0.79); /* 输入框聚焦光环 */
  --color-link: var(--color-primary); /* 链接颜色默认同主色 */
  --color-link-hover: var(--color-primary-hover); /* 链接悬停 */
  --color-border: #e2e8f0; /* 主要边框颜色 */
  --color-border-input: #cbd5e1; /* 输入框边框 */
  --color-border-button: #cccccc; /* 次要按钮边框 */
  --color-border-button-hover: #bbbbbb; /* 次要按钮悬停边框 */
  --color-input-bg: #ffffff; /* 输入框背景 */
  --color-button-text: #eeeeee;
  --color-button-hover-bg: #eeeeee; /* 次要按钮悬停背景 */
  --color-button-disabled-bg: #cccccc; /* 禁用按钮背景 */
  --color-button-disabled-text: #888888; /* 禁用按钮文字 */
  --color-error: #e53e3e; /* 错误颜色 */
  --color-shadow: rgba(0, 0, 0, 0.1); /* 阴影颜色 */
  --color-primary-glow: #7fe4f6;

  /* --- [接口] 未来可添加背景图片变量 --- */
  /* --background-image-url: url('/path/to/light-bg.jpg'); */
}

/* 深色主题: 通过给 html 或 body 添加 .dark 类来激活 */
html.dark {
  /* 或者 body.dark */
  --color-background: #1a202c; /* 深灰背景 */
  --color-surface: #2d3748; /* 卡片等表面背景 */
  --color-header-bg: #2d3748; /* 头部背景 */
  --color-text: #e2e8f0; /* 主要文字 (浅灰) */
  --color-text-secondary: #a0aec0; /* 次要文字 */
  --color-text-muted: #718096; /* 更弱文字 */
  --color-text-nav: #e2e8f0;
  --color-text-label: #a0aec0;
  --color-text-button: #ffffff; /* 主要按钮文字通常还是浅色 */
  --color-text-disabled: #406040;
  --color-heading: #ffffff; /* 标题 (白色) */
  --color-primary: #68d391; /* 深色模式下的亮绿色 */
  --color-primary-hover: #48bb78;
  --color-primary-focus-ring: rgba(186, 246, 208, 0.97);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --color-border: #4a5568; /* 深色边框 */
  --color-border-input: #4a5568;
  --color-border-button: #718096;
  --color-border-button-hover: #a0aec0;
  --color-input-bg: #2d3748; /* 输入框背景 */
  --color-button-text: #222222;
  --color-button-hover-bg: #4a5568; /* 次要按钮悬停背景 */
  --color-button-disabled-bg: #4a5568;
  --color-button-disabled-text: #a0aec0;
  --color-error: #fc8181; /* 深色模式下的亮红色 */
  --color-shadow: rgba(0, 0, 0, 0.4); /* 深色阴影 */
  --color-primary-glow: #2ecdaf;

  /* --- [接口] 深色主题背景图片 --- */
  /* --background-image-url: url('/path/to/dark-bg.jpg'); */
}

/* 书香凝碧 (shū xiāng níng bì) - 护眼模式 */
html.sepia {
  --color-background: #f4e9d8; /* 米黄背景 */
  --color-surface: #fdf6ec; /* 柔和的表面色，比背景稍亮 */
  --color-header-bg: #e8dcc4; /* 头部背景 */
  --color-text: #5b4636; /* 深棕文字 */
  --color-text-secondary: #70604f; /* 次要文字 */
  --color-text-muted: #907d66; /* 更弱文字 */
  --color-text-nav: #665544; /* 导航链接文字 */
  --color-text-label: #5b4636; /* 表单标签 */
  --color-text-button: #ffffff; /* 主要按钮文字 (通常白色对比度更好) */
  --color-text-disabled: #c0b3a3; /* 禁用文字 */
  --color-heading: #3f2f21; /* 标题 */
  --color-primary: #8fbc8f; /* 柔和的暗绿色 (像旧书页的绿色墨水) */
  --color-primary-hover: #77a177;
  --color-primary-focus-ring: rgba(188, 191, 148, 0.7); /* 柔和的绿色发光 */
  --color-primary-glow: #e5ba4c; /* 棕黄色发光 */
  --color-link: #739073; /* 链接颜色 */
  --color-link-hover: #5b705b;
  --color-border: #d8c8b4; /* 边框 */
  --color-border-input: #c8b6a2; /* 输入框边框 */
  --color-border-button: #b6a592; /* 次要按钮边框 */
  --color-border-button-hover: #9e8f80;
  --color-input-bg: #fdf6ec; /* 输入框背景 */
  --color-button-text: #ffffff; /* 按钮文字 */
  --color-button-hover-bg: #d9d0c3; /* 次要按钮悬停背景 */
  --color-button-disabled-bg: #ded4c7; /* 禁用按钮背景 */
  --color-button-disabled-text: #aa9d8f; /* 禁用按钮文字 */
  --color-error: #cc6666; /* 错误颜色 (稍柔和的红) */
  --color-shadow: rgba(0, 0, 0, 0.07); /* 轻微阴影 */
  /* --background-image-url: url('/public/sepia-bg.jpg'); */
}

/* 晴空蔚蓝 (qíng kōng wèi lán) - 蓝天模式 */
html.azure {
  --color-background: #e1f5fe; /* 淡天蓝背景 */
  --color-surface: #ffffff; /* 纯白表面，像云朵 */
  --color-header-bg: #bbdefb; /* 稍深一点的淡蓝头部 */
  --color-text: #0d47a1; /* 深蓝色文字，增加对比度 */
  --color-text-secondary: #1565c0; /* 次要文字 */
  --color-text-muted: #1e88e5; /* 更弱文字 */
  --color-text-nav: #0d47a1; /* 导航链接文字 */
  --color-text-label: #1565c0; /* 表单标签 */
  --color-text-button: #ffffff; /* 主要按钮文字 */
  --color-text-disabled: #90caf9; /* 禁用文字 */
  --color-heading: #0d47a1; /* 标题 */
  --color-primary: #2196f3; /* 明亮的天蓝色 */
  --color-primary-hover: #1976d2;
  --color-primary-focus-ring: rgba(33, 150, 243, 0.6); /* 明亮的蓝色发光 */
  --color-primary-glow: #5eb3ff; /* 蓝色发光 */
  --color-link: #1976d2; /* 链接颜色 */
  --color-link-hover: #0d47a1;
  --color-border: #b3e5fc; /* 淡蓝边框 */
  --color-border-input: #81d4fa; /* 输入框边框 */
  --color-border-button: #90caf9; /* 次要按钮边框 */
  --color-border-button-hover: #4fc3f7;
  --color-input-bg: #ffffff; /* 输入框背景 (白色) */
  --color-button-text: #ffffff; /* 按钮文字 */
  --color-button-hover-bg: #64b5f6; /* 次要按钮悬停背景 */
  --color-button-disabled-bg: #e3f2fd; /* 禁用按钮背景 (更淡的蓝) */
  --color-button-disabled-text: #90caf9; /* 禁用按钮文字 */
  --color-error: #f44336; /* 错误颜色 (标准红) */
  --color-shadow: rgba(0, 0, 0, 0.08); /* 轻柔阴影 */
  /* --background-image-url: url('/public/azure-bg.jpg'); */
}

/* 清辉皎皎 (qīng huī jiǎo jiǎo) - 清夜模式 */
html.theme-qinghui {
  --color-background: #e6f9f0;
  --color-surface: #f6fffa;
  --color-header-bg: #c6f7e2;
  --color-text: #1a3a2b;
  --color-text-secondary: #2e5946;
  --color-text-muted: #5bb98c;
  --color-text-nav: #1a3a2b;
  --color-text-label: #2e5946;
  --color-text-button: #ffffff;
  --color-text-disabled: #b2e2cc;
  --color-heading: #1a3a2b;
  --color-primary: #34d399;
  --color-primary-hover: #059669;
  --color-primary-focus-ring: rgba(52, 211, 153, 0.6);
  --color-primary-glow: #7affb3; /* 绿色发光 */
  --color-link: #059669;
  --color-link-hover: #1a3a2b;
  --color-border: #a7f3d0;
  --color-border-input: #6ee7b7;
  --color-border-button: #5bb98c;
  --color-border-button-hover: #34d399;
  --color-input-bg: #f6fffa;
  --color-button-text: #ffffff;
  --color-button-hover-bg: #bbf7d0;
  --color-button-disabled-bg: #d1fae5;
  --color-button-disabled-text: #b2e2cc;
  --color-error: #f87171;
  --color-shadow: rgba(0, 0, 0, 0.08);
}

/* 静夜幽邃 (jìng yè yōu suì) - 静夜模式 */
html.theme-jingye {
  --color-background: #1a2b2b;
  --color-surface: #223838;
  --color-header-bg: #1a2b2b;
  --color-text: #e6fff7;
  --color-text-secondary: #b2e2cc;
  --color-text-muted: #5bb98c;
  --color-text-nav: #e6fff7;
  --color-text-label: #b2e2cc;
  --color-text-button: #1a2b2b;
  --color-text-disabled: #5bb98c;
  --color-heading: #e6fff7;
  --color-primary: #34d399;
  --color-primary-hover: #059669;
  --color-primary-focus-ring: rgba(52, 211, 153, 0.6);
  --color-primary-glow: #7affb3; /* 绿色发光 */
  --color-link: #059669;
  --color-link-hover: #e6fff7;
  --color-border: #5bb98c;
  --color-border-input: #34d399;
  --color-border-button: #5bb98c;
  --color-border-button-hover: #34d399;
  --color-input-bg: #223838;
  --color-button-text: #1a2b2b;
  --color-button-hover-bg: #34d399;
  --color-button-disabled-bg: #223838;
  --color-button-disabled-text: #5bb98c;
  --color-error: #f87171;
  --color-shadow: rgba(0, 0, 0, 0.18);
}

/* --- [接口] 其他主题定义 --- */
/* 例如：高对比度主题 */
/* html.high-contrast { ... } */

/* 可以添加背景图片样式 */
/* body {
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; // 背景固定
} */

/* 浅色模式选项按钮的固定样式 */
.theme-option-light {
  background-color: #ffffff; /* 固定浅色背景 */
  color: #2c3e50; /* 固定浅色文字 */
  border: 0.05rem solid #e2e8f0; /* 固定浅色边框 */
}
.theme-option-light:hover {
  background-color: #f8f9fa; /* 浅色悬停背景 */
  /* 可以加点细微效果 */
  /* transform: translateY(-1px); */
}

/* 深色模式选项按钮的固定样式 */
.theme-option-dark {
  background-color: #2d3748; /* 固定深色背景 */
  color: #e2e8f0; /* 固定深色文字 */
  border: 1px solid #4a5568; /* 固定深色边框 */
}
.theme-option-dark:hover {
  background-color: #4a5568; /* 深色悬停背景 */
  /* transform: translateY(-1px); */
}

.theme-option-sepia {
  background-color: #f4e9d8; /* 固定护眼模式背景 */
  color: #5b4636; /* 固定护眼模式文字 */
  border: 1px solid #d8c8b4; /* 固定护眼模式边框 */
}
.theme-option-sepia:hover {
  background-color: #e9dacb;
  transform: translateY(-1px);
}

.theme-option-azure {
  background-color: #e1f5fe; /* 固定蓝天模式背景 */
  color: #0d47a1; /* 固定蓝天模式文字 */
  border: 1px solid #b3e5fc; /* 固定蓝天模式边框 */
}
.theme-option-azure:hover {
  background-color: #ccebff;
  transform: translateY(-1px);
}
/* --- [接口] 其他主题选项按钮的固定样式 --- */
/* 例如：护眼模式 */
/* .theme-option-sepia {
    background-color: #f4e9d8;
    color: #5b4636;
    border: 1px solid #d8c8b4;
}
.theme-option-sepia:hover {
    background-color: #e9dacb;
} */

/* --- 激活状态样式 (外发光) --- */
.theme-option-button.active {
  /* 使用当前主题的主色调作为发光颜色 */
  /* 这利用了 var() 仍然能访问当前全局主题变量的特性 */
  box-shadow: 0 0 0.17rem 0.17rem var(--color-primary-focus-ring) !important;
  /* 也可以用固定颜色发光，但用主题色关联性更强 */
  /* box-shadow: 0 0 8px 2px rgba(66, 185, 131, 0.6);*/

  /* 可选：稍微加粗边框或字体以示区别 */
  /* border-width: 2px; */
  font-weight: bold;
  /* 移除悬停效果以免干扰 */
  transform: none;
}
